<template>
  <el-dialog
    :visible.sync="show"
    width="695px"
    custom-class="selectTestletDialog"
    @close="handelClose"
  >
    <div class="mainBox" v-if="show">
      <div class="side">
        <div class="controllerBox">
          <button>新建</button>
          <button @click="handelSaveTestLet">保存</button>
        </div>
        <div class="searchInput">
          <el-input v-model="searchValue" placeholder="请输入关键词"></el-input>
        </div>
        <div class="testletList">
          <el-select
            v-model="select"
            multiple
            filterable
            allow-create
            collapse-tags
            default-first-option
            placeholder="请选择标签"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="questionGroup">
            <div
              class="question"
              :class="{ 'is-select': selectIndex == index }"
              v-for="(item, index) in filterSearchValue"
              :key="index"
              @click="handelSelect(item, index)"
            >
              <div class="circular" />
              <div class="name">{{ item.name }}</div>
              <div class="iconBox">
                <img :src="require('@/assets/images/carouselRight.png')" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <testlet :selectItem="selectItem" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import testlet from './testlet'
export default {
  components: {
    testlet,
  },
  data() {
    return {
      show: false, // 弹窗显示
      searchValue: '', // 搜索关键词
      options: [
        {
          value: 'HTML',
          label: 'HTML',
        },
        {
          value: 'CSS',
          label: 'CSS',
        },
        {
          value: 'JavaScript',
          label: 'JavaScript',
        },
      ],
      select: [],
      questionLists: [
        {
          id: '',
          name: 'H5',
        },
        {
          id: '',
          name: 'CSS',
        },
        {
          id: '',
          name: 'JavaScript',
        },
        {
          id: '',
          name: 'Python',
        },
        {
          id: '',
          name: 'php',
        },
        {
          id: '',
          name: 'Node',
        },
        {
          id: '',
          name: 'C#',
        },
      ],
      selectItem: {},
      selectIndex: null,
    }
  },
  props: {
    showSelectTestlet: Boolean,
  },
  watch: {
    showSelectTestlet(n, o) {
      this.show = n
    },
  },
  computed: {
    filterSearchValue() {
      let newSearchArr = []
      if (this.searchValue !== '') {
        this.questionLists.forEach((item) => {
          if (
            item.name
              .toLocaleLowerCase()
              .indexOf(this.searchValue.toLocaleLowerCase()) !== -1
          ) {
            newSearchArr.push(item)
          }
        })
        if (!newSearchArr.length) return []
      }

      let newSelect = []
      if (this.select.length !== 0) {
        this.questionLists.forEach((item) => {
          this.select.forEach((sitem) => {
            if (
              item.name
                .toLocaleLowerCase()
                .indexOf(sitem.toLocaleLowerCase()) !== -1
            ) {
              newSelect.push(item)
            }
          })
        })
        if (!newSelect.length && !newSearchArr.length) return []
      }

      let newArr = Array.from(new Set([...newSearchArr, ...newSelect]))
      // const set = new Set() //实例化对象
      // let a = []

      // newArr.forEach(item=>{
      //   let index = [...set].indexOf(item.name) !== -1
      //   a.push(index)
      // })

      if (!newArr.length) return this.questionLists
      return newArr
    },
  },
  created() {
    this.$nextTick(() => {
      this.selectItem = this.questionLists[0]
      this.selectIndex = 0
    })
  },
  methods: {
    // 关闭弹窗
    handelClose() {
      this.$emit('close')
    },
    // 选择题组
    handelSelect(item, index) {
      this.selectItem = item
      this.selectIndex = index
    },
    // 保存题目
    handelSaveTestLet() {
      if (!this.selectItem.name) return
      this.$emit('saveTestlet', this.selectItem)
    },
  },
}
</script>


<style lang="stylus">
.selectTestletDialog {
  width: 800px;
  height: 405px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  border-radius: 5px;

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;

    .mainBox {
      display: flex;

      .side {
        width: 180px;
        height: 405px;

        .controllerBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 30px;
          background-color: #75c42e;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          overflow: hidden;

          button {
            cursor: pointer;
            outline: none;
            padding: 0;
            margin: 0;
            flex: 1;
            height: 100%;
            border: none;
            background: #75c42e;
            font-family: Segoe UI;
            font-size: 14px;
            color: #ffffff;
          }
        }

        .testletList {
          height: 335px;

          .el-select .el-input .el-input__inner {
            border-radius: 0;
          }

          .questionGroup {
            padding: 0 3px;
            height: 295px;
            background-color: #e4e8ee;
            border-radius: 5px;
            overflow-y: scroll;

            .question {
              cursor: pointer;
              padding: 0 10px 0 12px;
              margin-top: 5px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              height: 40px;
              background-color: #ffffff;
              border-radius: 5px;
              font-weight: bold;
              font-family: Segoe UI;
              font-size: 16px;
              color: #e9e9e9;

              .circular {
                width: 12px;
                height: 12px;
                background-color: #ffffff;
                border: solid 4px #fea91b;
                border-radius: 50%;
                opacity: 0.8;
              }

              .name {
                max-width: 50%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .iconBox {
                img {
                  width: 10px;
                  height: 19px;
                  filter: contrast(0.5);
                }
              }
            }

            .is-select {
              background: #fee9c5;
              color: #fea91b;
            }

            .question:hover {
              background: #fee9c5;
              color: #fea91b;
            }
          }

          .questionGroup::-webkit-scrollbar, .confirmCourseInfo::-webkit-scrollbar {
            width: 0;
            height: 1px;
          }

          /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
          .questionGroup::-webkit-scrollbar-thumb, .confirmCourseInfo::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 1px #bfc4c3;
            background: #dcdcdc;
            border-radius: 10px;
          }

          /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
          .questionGroup::-webkit-scrollbar-track, .confirmCourseInfo::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.18);
            // background: rgba(195, 197, 198, 0.18);
            border-radius: 4px;
          }
        }
      }

      .main {
        flex: 1;
      }
    }
  }
}
</style>